<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dv {
            width: 90%;
            height: 600px;
        }
    </style>
    <!--    1.引入js-->
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <script src="../../lib/echarts.min.js"></script>
    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
    <!--    2.图表显示位置-->
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-lg12">
                <div class="dv" id="dv1"></div>
            </div>
            <div class="layui-col-lg12">
                <div class="dv" id="dv2"></div>
            </div>
        </div>
    </div>
</div>
<script>
    //饼图
    $(function () {
        init();
        init2();
    })

    function init() {
        var dv = document.getElementById("dv1");
        var chart = echarts.init(dv);
        var option = {
            title: {
                text: '部门工资占比图',
                subtext: '数据来源内部系统',
                left: 'center'
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {},
                    left: 'left'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '部门',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: 1, name: '人事部'},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        chart.setOption(option);
        //请求接口 Ajax
        $.get("/api/salary/sum.do", (res) => {
            option.series[0].data = res.data;
            chart.setOption(option);
        })
    }

    function init2() {
        var dv1 = document.getElementById("dv2");
        var chart = echarts.init(dv1);
        var option = {
            title: {
                text: '部门男女总工资',
                subtext: '数据来源内部数据',
                left: 'center'
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: ['部门']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [1],
                    type: 'line'
                }
            ]
        };
        chart.setOption(option);
        $.get("/api/salary/sex.do", (res) => {
            option.xAxis.data = res.data[0];
            option.series[0].data = res.data[1];
            chart.setOption(option);
        });
    }
</script>
</body>
</html>